<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1394 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path fill-opacity=".2" fill="#C4C4C4" d="M424.628 838.685c-1.345.02-2.701.03-4.057.03-151.483 0-274.285-122.802-274.285-274.286 0-142.912 109.295-260.291 248.861-273.116C450.609 182.096 564 107.276 694.857 107.276c165.371 0 302.831 119.496 330.762 276.85 119.145 7.218 213.538 106.126 213.538 227.085 0 125.64-101.864 227.504-227.513 227.504-1.22 0-2.448-.01-3.667-.03H424.628z"/><path fill="#686868" d="M424.628 838.685v-9.752h-.136l.136 9.752zm-29.481-547.381.887 9.713 5.364-.488 2.438-4.808-8.689-4.417zm630.482 92.823-9.606 1.697 1.345 7.568 7.666.468.595-9.733zm-17.642 454.558.156-9.752h-.156v9.752zm-583.495-9.752-3.92.03v19.504c1.404 0 2.808-.01 4.193-.03l-.273-19.504zm-3.92.03c-146.091 0-264.534-118.434-264.534-264.534h-19.505c0 156.867 127.171 284.038 284.038 284.038v-19.505zM156.037 564.428c0-137.82 105.404-251.036 240.006-263.412L394.25 281.6c-144.53 13.283-257.717 134.827-257.717 282.829h19.505zM403.846 295.72c53.862-106.056 163.957-178.69 291.011-178.69V97.524c-134.68 0-251.348 77.014-308.41 189.372l17.4 8.825zm291.011-178.69c160.563 0 294.054 116.014 321.166 268.795l19.202-3.414c-28.73-161.909-170.18-284.886-340.358-284.886v19.505zm330.177 276.83c114.025 6.905 204.38 101.581 204.38 217.352h19.505c0-126.147-98.44-229.298-222.705-236.827l-1.18 19.476zm204.38 217.352c0 120.257-97.494 217.751-217.76 217.751v19.505c131.032 0 237.265-106.223 237.265-237.256h-19.505zm-217.76 217.741-3.511-.029-.312 19.505c1.277.02 2.545.03 3.822.03v-19.506zm-3.667-.029H424.628v19.505h583.359v-19.505z"/><path fill="#FFF" d="m692.712 336.916-219 214.747h127.58V734.52H784.15V551.663h127.56l-219-214.747z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class IconAGroup626325 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
